import React,{ useState, useEffect, Fragment } from 'react';
import Proptypes from 'prop-types';
import {NavLink, useHistory} from 'react-router-dom';
import {connect} from 'react-redux';
import {
    List, InputItem, Button, Radio, WhiteSpace,
    Toast
} from 'antd-mobile';
import { registerAsync } from '@/redux/actions';

import '@/assets/css/reg-login.less';
import user_svg from  '@/assets/img/user.svg';
import pwd_svg from '@/assets/img/pwd.svg';
import surepwd_svg from  '@/assets/img/sure_pwd.svg';


Register.propTypes = {
    user: Proptypes.object.isRequired,
    doRegister: Proptypes.func.isRequired
}
function Register(props) {
    const history = useHistory();
    //state
    let [type, setType] = useState(0);
    let [user, setUser] = useState('');
    let [pwd, setPwd] = useState('');
    let [pwd2, setPwd2] = useState('');
    let [data] = useState([
        {type: 0, name: '牛人'},
        {type: 1, name: '老板'}
    ]);


    //methods
    let {doRegister} = props;
    let handleRegister = () => {

        if(user === ''){
            return Toast.fail('请输入用户名',1);
        }else if(pwd === ''){
            return Toast.fail('请输入密码',1);
        }else if(pwd !== pwd2){
            return Toast.fail('两次密码不一致',1);
        }

        doRegister({user, pwd, type},function (code, msg) {
            if(code === 0){
                Toast.success(msg,1, () => {
                    type === 1?history.replace('/home/bossinfo'): history.replace('/home/workerinfo')
                });
            }else{
                Toast.fail(msg,1);
            }

        })
    }


    return (
        <div className="register">
            <h3>注册BOSS直聘</h3>
            <List className="reg-form">
                <InputItem
                    placeholder="用户名"
                    value={user}
                    onChange={val => setUser(val)}
                >
                    <div className="flex-vc">
                        <div style={{ backgroundImage: `url(${user_svg})`, backgroundSize: 'cover', height: '22px', width: '22px' }} />
                        <p>用户名</p>
                    </div>

                </InputItem>
                <InputItem
                    type="password"
                    placeholder="密  码"
                    value={pwd}
                    onChange={val => setPwd(val)}
                >
                    <div className="flex-vc">
                        <div style={{ backgroundImage: `url(${pwd_svg})`, backgroundSize: 'cover', height: '22px', width: '22px' }} />
                        <p>密&nbsp;&nbsp;&nbsp;&nbsp;码</p>
                    </div>
                </InputItem>
                <InputItem
                    type="password"
                    value={pwd2}
                    onChange={val => setPwd2(val)}
                    placeholder="确认密码"
                >
                    <div className="flex-vc">
                        <div style={{ backgroundImage: `url(${surepwd_svg})`, backgroundSize: 'cover', height: '22px', width: '22px' }} />
                        <p>确认密码</p>
                    </div>
                </InputItem>
                <List.Item>
                    <span className="typelabel">用户类型</span>
                    {
                        data.map(d => (
                            <Fragment key={d.type}>
                            <Radio checked={type === d.type} onChange={() => setType(d.type)}>
                                {d.name}
                            </Radio>
                            &nbsp; &nbsp;
                            </Fragment>
                        ))
                    }
                </List.Item>
            </List>
            <WhiteSpace size='lg'/>
            <Button type="primary" onClick={handleRegister}>注册</Button>
            <WhiteSpace size='lg'/>
            <NavLink
                to="/login"
                className="haveAccount"
            >已有账号?</NavLink>

        </div>
    )
}

function mapStateToProps(state) {
    return {
        user: state.user
    }
}
function mapDispatchToProps(dispatch) {
    return {
        doRegister: ({user, pwd, type},callBack) => dispatch(registerAsync({user, pwd, type},callBack))
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Register)